import React, { Component } from 'react';
import '../css/iconfont.css'
import '../css/cart.scss'

class cart extends Component {
    state = {
        allchecked:true,
        products: [
            {
                id: 1,
                product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
                img_url:
                    "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
                price: "588",
                origin_price: 599,
                num: 1,
                checked: true,
            },
            {
                id: 2,
                product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
                img_url:
                    "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
                price: "588",
                origin_price: 599,
                num: 1,
                checked: true,
            },
        ]

    }
    sub = (index) => {
        // console.log(index)
        let products = this.state.products
        if (products[index].num) {
            products[index].num--
            this.setState({
                products: products
            })
        }
        // console.log(products)

    }
    add = (index) => {
        // console.log(index)
        let products = this.state.products
        products[index].num++
        // console.log(products)
        this.setState({
            products: products
        })
    }
    totalPrice=()=>{
        // 总价计算 商品数量*单价
        let total=0
        this.state.products.forEach(v=>{
            if(v.checked){
                total+=v.num*v.price
            }
            
        })
        return total
    }
    totalNum=()=>{
        // 总数量等于 已选中的数量之和
        let totalnum=0
        this.state.products.forEach(v=>{
            if(v.checked){
                totalnum+=v.num
            }
        })
        return totalnum
    }
    handleCheck=(index)=>{
        let allchecked=true
        let products=this.state.products
        products[index].checked=!products[index].checked
        // console.log(products[index].checked)
        products.forEach(v=>{
            if(!v.checked){
                allchecked=false
            }
        })
        this.setState({
            products:products,
            allchecked
        })
     
        return products[index].checked
    }
    render() {
        return (
            <div className="shopcart">
                <div className="cart-main">
                    {this.state.products.map((v, index) => {
                        return (<div className="cart-item" key={index}>
                            <div className="item-left">
                                {/* 单选 */}
                                <i className={"iconfont "+(v.checked?"icon-xuanzhong-2":"icon-xuanzhong-")}onClick={()=>this.handleCheck(index)}></i>
                            </div>
                            <div className="item-mid">
                                {/* 商品图片 */}
                                <img src={v.img_url} alt="" />
                            </div>
                            <div className="item right">
                                {/* 商品信息 */}
                                <div className="right-top">
                                    {v.product_title}
                                </div>
                                <div className="right-und">
                                    <div className="und-left">
                                        <strong>￥{v.price}</strong>
                                        <span>￥{v.origin_price}</span>
                                    </div>
                                    <div className="und-right">
                                        <i className="iconfont icon-sub" onClick={() => this.sub(index)}></i>
                                        <span>{v.num}</span>
                                        <i className="iconfont icon-CombinedShape" onClick={() => this.add(index)}></i>
                                    </div>
                                </div>
                            </div>
                        </div>)
                    })}

                </div>
                <div className="cart-foot">
                    <div className="foot-left">
                        {/* 全选 */}
                        <i className={"iconfont "+(this.state.allchecked?"icon-xuanzhong-2":"icon-xuanzhong-")}></i><span>已选({this.totalNum()})</span>
                    </div>
                    <div className="foot-right">
                        {/* 下单 */}
                        <div className="right-left">
                            <strong className="total-price">￥{this.totalPrice()}</strong>
                            <span className="discount">￥22</span>
                        </div>
                        <div className="right-right">
                            下单
                    </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default cart;